<template>
  <div class="section">
    <!-- 筛选条件 -->
    <condition-card @reset="reset" @search="onSubmit">
      <el-row>
        <el-col :span="8">
          <el-form-item label="学期">
            <CalendarSelect
              v-model="query.calendarId"
              :defaulted="true"
              @change="changeCalendar"
              @load-done="calendarLoadDone"
            ></CalendarSelect>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="校区">
            <DictSelect
              :plzSelect="true"
              v-model="query.campus"
              :data="options.campus"
              :clearable="false"
              @change="handelCampusChang"
            ></DictSelect>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="节次">
            <el-row type="flex" justify="center" align="middle">
              <el-col>
                <el-input
                  type="text"
                  v-model="query.timeStart"
                  maxlength="5"
                  @keypress.native="checkNum"
                  @blur="checkTimeValue($event,1)"
                  :placeholder="$t('message.mustNumber')"
                />
              </el-col>
              <div class="text-center plr-15px">-</div>
              <el-col>
                <el-input
                  type="text"
                  v-model="query.timeEnd"
                  maxlength="5"
                  @keypress.native="checkNum"
                  @blur="checkTimeValue($event,2)"
                  :placeholder="$t('message.mustNumber')"
                />
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="排课容量">
            <el-row type="flex" justify="center" align="middle">
              <el-col>
                <el-input
                  type="text"
                  v-model="query.classCapacity"
                  @keypress.native="checkNum"
                  maxlength="5"
                  :placeholder="$t('message.mustNumber')"
                />
              </el-col>
              <div class="text-center plr-15px">-</div>
              <el-col>
                <el-input
                  type="text"
                  v-model="query.classCapacityEnd"
                  @keypress.native="checkNum"
                  maxlength="5"
                  :placeholder="$t('message.mustNumber')"
                />
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="教学楼">
            <DictSelect
              :plzSelect="true"
              v-model="query.towerCode"
              :data="options.teachingBuildingArr"
              :filterable="true"
              :clearable="true"
            ></DictSelect>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="教室类型">
            <DictSelect
              :plzSelect="true"
              v-model="query.type"
              :clearable="true"
              :data="options.type"
            ></DictSelect>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="周次">
            <el-row type="flex" justify="center" align="middle">
              <el-col>
                <el-input
                  type="text"
                  v-model="query.weekStart"
                  maxlength="5"
                  @keypress.native="checkNum"
                  @blur="checkWeekValue($event,1)"
                  :placeholder="$t('message.mustNumber')"
                />
              </el-col>
              <div class="text-center plr-15px">-</div>
              <el-col>
                <el-input
                  type="text"
                  v-model="query.weekEnd"
                  maxlength="5"
                  @keypress.native="checkNum"
                  @blur="checkWeekValue($event,2)"
                  :placeholder="$t('message.mustNumber')"
                />
              </el-col>
            </el-row>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="星期">
            <DictSelect
              :plzSelect="true"
              v-model="query.weekDay"
              :data="options.weekDay"
              :multiple="false"
              :clearable="true"
            ></DictSelect>
          </el-form-item>
        </el-col>
      </el-row>
    </condition-card>
    <!-- 教室使用情况统计 -->
    <el-card shadow="never">
      <h2>节次教室上课使用率</h2>
      <div class="edu-opertion-bar">
        <div class="float-left">
          <el-input
            :placeholder="'教学楼名称'" :clearable="true"
            v-model="query.conditionValue"
            style="width:240px"
            @keyup.enter.native="onSubmit"
          >
            <i class="el-icon-search" slot="suffix" style="margin-top:10px;cursor:pointer"></i>
          </el-input>
        </div>
        <div class="float-right">
          <el-button @click="exportExcelClassroomUsageRateByTime" type="success" icon="el-icon-printer" plain>导出</el-button>
        </div>
        <div class="clear-both"></div>
      </div>
      <EduTable
        :order="true"
        :selection="false"
        :pageNum="query.pageNum_"
        :data="sectionList.data"
        :total="sectionList.total"
        class="classroomTable"
        @page-change="pageChange"
      >
        <el-table-column label="学期" min-width="90">
          <template slot-scope="scope" >
            <el-tooltip placement="top" :content="scope.row.calendarName" effect="light">
              <span>{{scope.row.calendarName}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="周次" min-width="80">
          <template slot-scope="scope">{{scope.row.weekBitStr}}</template>
        </el-table-column>
        <el-table-column label="星期" min-width="60">
          <template slot-scope="scope">{{scope.row.weekDay}}</template>
        </el-table-column>
        <el-table-column label="教学楼" min-width="100">
          <template slot-scope="scope">
            <el-tooltip placement="top" :content="scope.row.towerName" effect="light">
              <span>{{scope.row.towerName}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="教室类型" min-width="60">
          <template slot-scope="scope">{{scope.row.typeI18n ? scope.row.typeI18n : "全部"}}</template>
        </el-table-column>
        <el-table-column label="节次" min-width="60">
          <template slot-scope="scope">{{scope.row.timeIndex}}</template>
        </el-table-column>
        <el-table-column label="校区" min-width="80">
          <template slot-scope="scope">
            <el-tooltip placement="top" :content="scope.row.campusI18n" effect="light">
              <span>{{scope.row.campusI18n}}</span>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column label="排课容量" min-width="80">
          <template slot-scope="scope">{{scope.row.classCapacity}}</template>
        </el-table-column>
        <el-table-column label="上课教室数" min-width="80">
          <template slot-scope="scope">{{scope.row.classroomNum}}</template>
        </el-table-column>
        <el-table-column label="教室总数" min-width="80">
          <template slot-scope="scope">{{scope.row.totalClassroomNum}}</template>
        </el-table-column>
        <el-table-column label="总学时" min-width="80">
          <template slot-scope="scope">{{scope.row.totalTime}}</template>
        </el-table-column>
        <el-table-column label="节次教室上课使用率" min-width="90">
          <template slot-scope="scope">{{scope.row.timeUsageRate}}</template>
        </el-table-column>
      </EduTable>
    </el-card>
  </div>
</template>

<script>
import { queryDic } from "common/src/api/dictionary";
import * as API from "common/src/api/resource/classroom";
import UTILS from "common/src/utils/utils";
export default {
  name: "section",
  data() {
    return {
      query: {
        pageNum_: 1,
        pageSize_: 20,
        calendarId: "",
        campus: "1",
        towerCode: "",
        type: "",
        weekDay: "",
        weekStart: "",
        weekEnd: "",
        timeStart: "",
        timeEnd: "",
        classCapacity: "",
        classCapacityEnd: "",
        conditionValue: ""
      },
      defaultQuery: {
        pageNum_: 1,
        pageSize_: 20,
        calendarId: "",
        campus: "1",
        towerCode: "",
        type: "",
        weekDay: "",
        weekStart: "",
        weekEnd: "",
        timeStart: "",
        timeEnd: "",
        classCapacity: "",
        classCapacityEnd: "",
        conditionValue: ""
      },
      options: {
        campus: [],
        type: [],
        teachingBuildingArr: [],
        weekAtList: [],
        weekDay: [
          {
            label: "星期一",
            value: "1"
          },
          {
            label: "星期二",
            value: "2"
          },
          {
            label: "星期三",
            value: "3"
          },
          {
            label: "星期四",
            value: "4"
          },
          {
            label: "星期五",
            value: "5"
          },
          {
            label: "星期六",
            value: "6"
          },
          {
            label: "星期日",
            value: "7"
          }
        ]
      },
      // 节次教室上课使用率统计列表
      sectionList: {
        data: [],
        total: 0
      },
      allCalendarList: [],
      totalWeekNumber: "",
      currentTermCalendar: "",
      //可输入最大节次
      maxTime: 12,
      //可输入最小节次
      minTime: 1
    };
  },
  methods: {
    // 获取下拉框数据（数据字典）
    initOptions() {
      let data = {
        lang: this.$store.getters.language || "cn",
        type: "allChild",
        keys: ["X_XQ", "X_JSLX"]
      };
      queryDic(data).then(res => {
        if (res.code == 200) {
          UTILS.fillSelect(
            {
              campus: "X_XQ",
              type: "X_JSLX"
            },
            res.data,
            this.options
          );
        }
      });
    },
    checkWeekValue(e, flag) {
      let inputValue = e.target.value;
      if (inputValue > this.totalWeekNumber) {
        e.target.value = this.totalWeekNumber;
        if (flag === 1) {
          this.query.weekStart = this.totalWeekNumber;
        } else {
          this.query.weekEnd = this.totalWeekNumber;
        }
      }
    },
    checkTimeValue(e, flag) {
      let inputValue = e.target.value;
      if (inputValue > this.maxTime) {
        e.target.value = this.maxTime;
        if (flag === 1) {
          this.query.timeStart = this.maxTime;
        } else {
          this.query.timeEnd = this.maxTime;
        }
      }
    },
    changeCalendar(val) {
      if (this.allCalendarList) {
        this.allCalendarList.forEach(canlendar => {
          if (canlendar.id === val) {
            this.totalWeekNumber = canlendar.weekNum;
          }
        });
      }
    },
    calendarLoadDone(list) {
      if (list) {
        this.allCalendarList = list;
        for (let index = 0; index < list.length; index++) {
          const element = list[index];
          if (element.currentTermFlag) {
            this.currentTermCalendar = element.id;
            this.query.calendarId = element.id;
            this.totalWeekNumber = element.weekNum;
            this.queryList();
            break;
          }
        }
      }
    },
    checkNum(e) {
      //只输入数字正则
      let reg = /^(0|[1-9]\d*)$/;
      let num = e.target.value || "";
      let str =
        e.key && e.key != "Unidentified" ? e.key : num.substr(num.length - 1);
      //没有满足任何一种情况，中断执行
      if (reg.test(str)) {
        return true;
      }
      e.returnValue = false;
      return false;
    },
    // 获取教学楼数据方法 (根据校区获取)
    handelCampusChang(item) {
      this.query.towerCode = "";
      this.options.teachingBuildingArr = [];
      API.conditionQueryByDict({ campus: item }).then(res => {
        if (res && res.code == 200) {
          let dataList = res.data.list;
          dataList.forEach(item => {
            this.options.teachingBuildingArr.push({
              value: item.code,
              label: item.name
            });
          });
        }
      });
    },
    reset() {
      this.query = JSON.parse(JSON.stringify(this.defaultQuery));
      this.options.teachingBuildingArr = [];
      this.handelCampusChang(null);
      //学期为当前学期
      this.query.calendarId = this.currentTermCalendar;
      this.queryList();
    },
    async queryList() {
      //保证提交的数据中周次必须起始周和结束周要么都有值，要么都没值
      if (this.query.weekStart) {
        if (this.query.weekEnd == "" || this.query.weekEnd == 0) {
          this.query.weekEnd = this.totalWeekNumber;
        }
      }
      if (this.query.weekEnd) {
        if (this.query.weekStart == "" || this.query.weekStart == 0) {
          this.query.weekStart = 1;
        }
      }
      if (this.query.weekStart > 0 && this.query.weekEnd > 0 && parseInt(this.query.weekEnd) < parseInt(this.query.weekStart)) {
        this.$message({
              type: "warning",
              message: "筛选条件起始周次不能大于结束周次!"
            });
        return;
      }
      let res = await API.getClassroomUsageRateByTime(this.query);
      if (res && res.code == 200) {
        this.sectionList.data = res.data.list;
        this.sectionList.total = res.data.total_;
      }
    },
    // 分页功能
    pageChange(val) {
      this.query.pageNum_ = val.pageNum;
      this.query.pageSize_ = val.pageSize;
      this.queryList();
    },
    onSubmit() {
      this.query.pageNum_ = 1;
      this.queryList();
    },
    exportExcelClassroomUsageRateByTime() {
      let res = API.exportExcelClassroomUsageRateByTime(this.query);
    }
  },
  created() {
    this.initOptions();
    this.handelCampusChang(null);
  }
};
</script>

<style lang="scss" scoped>
.section {
  .plr-15px {
    padding: 0 15px;
  }
}
.classroomTable{
    .cell{
      white-space: pre-line;
	  padding: 0 2px;
	  text-align: center;
    }
  }
</style>
